<template>
	<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
					   :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :style="field.options.customStyle"
					   :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
		<!-- el-upload增加:name="field.options.name"后，会导致又拍云上传失败！故删除之！！ -->
		<sc-upload-file ref="fieldEditor" v-show="field.options.disabled!=true"
						:disabled="field.options.disabled"
						:style="styleVariables"
						:headers="uploadHeaders"
						:apiObj="apiObj"
						v-model="fileList"
						:with-credentials="field.options.withCredentials"
						:multiple="field.options.multipleSelect"
						:limit="field.options.limit"
						:class="{'hideUploadDiv': uploadBtnHidden}"
						:data="{module:'bpm'}"
						:show-file-list="false"
						:tip="field.options.uploadTip"
						:accept="field.options.fileTypes.join(',')"
						:on-exceed="handleFileExceed"
						:on-success="handleFileUpload" :on-error="handleUploadError"
		>
			<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
		</sc-upload-file>
		<div style="margin-top: 10px">
			<attach-menu :attachList="this.fileList" :roleFlag="field.options.disabled?'3':'4'" :preview="true" @deletesuccess="changeValue"></attach-menu>
		</div>
	</form-item-wrapper>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'
import FormItemWrapper from './form-item-wrapper'
import emitter from '@/utils/emitter'
import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/designer/form-designer/form-widget/field-widget/fieldMixin";
let selectFileText = "请选择文件"
export default {
	name: "file-upload-widget",
	componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
	mixins: [emitter, fieldMixin],
	props: {
		field: Object,
		parentWidget: Object,
		parentList: Array,
		indexOfParentList: Number,
		designer: Object,

		designState: {
			type: Boolean,
			default: false
		},

		subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
			type: Number,
			default: -1
		},
		subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
			type: Number,
			default: -1
		},
		subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
			type: String,
			default: ''
		},

	},
	components: {
		FormItemWrapper,
		AttachMenu
	},
	data() {
		return {
			apiObj: this.$API.file.attach.uploadFile,
			oldFieldValue: null, //field组件change之前的值
			fieldModel: '',
			rules: [],
			uploadHeaders: {},
			uploadData: {
				key: '',  //七牛云上传文件名
				//token: '',  //七牛云上传token

				//policy: '',  //又拍云上传policy
				//authorization: '',  //又拍云上传签名
			},
			fileList: [],  //上传文件列表
			uploadBtnHidden: false,
			styleVariables: {
				'--select-file-action': selectFileText,
				'text-align': 'left'
			},
		}
	},
	computed: {},
	beforeCreate() {
		/* 这里不能访问方法和属性！！ */
	},

	created() {
		/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
		   需要在父组件created中初始化！！ */
		this.initFieldModel()
		this.registerToRefList()
		this.initEventHandler()
		this.buildFieldRules()
		this.handleOnCreated()
	},

	mounted() {
		this.handleOnMounted()
	},

	beforeUnmount() {
		this.unregisterFromRefList()
	},

	methods: {
		handleFileExceed() {
			let uploadLimit = this.field.options.limit
			this.$message.warning(this.$t('render.hint.uploadExceed').replace('${uploadLimit}', uploadLimit))
		},
		handleFileUpload() {
			let oldValue = deepClone(this.fieldModel)
			this.syncUpdateFormModel(this.fileList)
			this.emitFieldDataChange(this.fileList, oldValue)
		},
		changeValue()
		{
			let oldValue = deepClone(this.fieldModel)
			this.syncUpdateFormModel(this.fileList)
			this.emitFieldDataChange(this.fileList, oldValue)
		},
		updateFieldModelAndEmitDataChangeForRemove(deletedFileIdx, fileList) {
			let oldValue = deepClone(this.fieldModel)
			this.fieldModel.splice(deletedFileIdx, 1)
			this.syncUpdateFormModel(this.fieldModel)
			this.emitFieldDataChange(this.fieldModel, oldValue)
		},
		handleUploadError(err, file, fileList) {
			if (this.field.options.onUploadError) {
				let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
				customFn.call(this, err, file, fileList)
			} else {
				this.$message({
					message: this.$t('render.hint.uploadError') + err,
					duration: 3000,
					type: 'error',
				})
			}
		},

	}
}
</script>

<style lang="scss" scoped>
@import "../../../../../assets/formdesigner/styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */

.full-width-input {
	width: 100% !important;
}

.dynamicPseudoAfter :deep(.el-upload.el-upload--text) {
	color: $--color-primary;
	font-size: 12px;

	.el-icon-plus:after {
		content: var(--select-file-action);
	}
}

.hideUploadDiv {
	:deep(div.el-upload--picture-card) { /* 隐藏最后的图片上传按钮 */
		display: none;
	}

	:deep(div.el-upload--text) { /* 隐藏最后的文件上传按钮 */
		display: none;
	}

	:deep(div.el-upload__tip) { /* 隐藏最后的文件上传按钮 */
		display: none;
	}
}

.upload-file-list {
	font-size: 12px;

	.file-action {
		color: $--color-primary;
		margin-left: 5px;
		margin-right: 5px;
		cursor: pointer;
	}
}

</style>
